<template>
  <div>
    <div class="header">
      <div class="title"><text>轮播图</text></div>
      <el-button type="primary" style="margin-left:20px;" size="mini" class="icon el-icon-circle-plus-outline"
        @click="dialogFormVisible=true">添加</el-button>
      <input v-model="queryinfo.title" type="text" placeholder=" 请输入"
        style="margin-left: 20px; background-color: rgb(233, 237, 240); border: 1px solid #999; border-right:none; height: 28px;">
      <button class="el-icon-search"
        style="border: 1px solid #999; border-left: none; height: 30px; width: 40px;" @click="getlist"></button>
    </div>
    <!-- 内容区域-列表 -->
    <el-card class="box-card">
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="pic"
        label="轮播图"
        width="180">
      </el-table-column>
    </el-table>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryinfo.page"
    :page-sizes="[1, 2, 3, 5]"
    :page-size="queryinfo.psize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
    </el-card>
  </div>
</template>
<script>
 export default {
     data(){
         return{
          tableData:[],
          queryinfo:{
            page:1,
            psize:1,
            title:''
          },
          total:0,
         }
     },
     created(){
       this.getlist()
     },
     methods:{
      handleSizeChange(val) {
          this.queryinfo.psize=val
          this.getlist()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.queryinfo.page=val
        this.getlist()
        console.log(`当前页: ${val}`);
      },
     async getlist(){
       const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/pic/list',{params:this.queryinfo})
       console.log(res)
      this.tableData=res.data.list
     }
     },
     
 }
</script>
<style scoped>
  .header {
    width: 100%;
    display: flex;
    height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 1px 1px 3px 1px rgb(200, 226, 241);
    background-color: rgb(233, 237, 240);
    align-items: center;
  }

  .title {
    width: 100px;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /* background-color: rgb(160, 197, 240); */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    font-weight: bold;
  }

</style>
